<template>
	<view>
		<u-select v-model="classesShow"
			:list="classesList" 
			title="选择班级" 
			@confirm="classesConfirm"
			label-name="name" 
			:default-value="defaultValue"
			></u-select>
		<u-popup v-model="childrenShow" mode="bottom">
			<view class="u-select__header" >
				<view class="u-select__header__cancel u-select__header__btn"
					hover-class="u-hover-class" :hover-stay-time="150"  @click="childrenCancel">
					取消
				</view>
				<view class="u-select__header__title">
					选择学生
				</view>
				<view class="u-select__header__confirm u-select__header__btn"
					hover-class="u-hover-class"
					:hover-stay-time="150" @click="childrenConfirm">
					确定
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 500rpx;">
				<u-grid v-if="classesIndex >= 0" :col="3" :border="false">
					<u-grid-item v-for="(item,index) in childrenList" @click="itemClick(item, index)">
						<children-info-view :name="item.name" :gender="item.gender" :imgUrl="item.imgUrl"></children-info-view>
						<u-checkbox class="check-view" v-model="item.check" shape="circle" 
							label-disabled="true"
							enabled="true"
							:active-color="appTheme.checkColor"
							></u-checkbox >
					</u-grid-item>
				</u-grid>
			</scroll-view>

		</u-popup>
	</view>
</template>

<script>
	import {
		getMyClassChildren
	} from '@/api/common.js'
	import ChildrenInfoView from '@/components/children-info-view.vue'
	import appMixin from '@/mixins/app.js'
	export default {
		name:"ChildrenSelectView",
		mixins: [appMixin],
		components: {
			ChildrenInfoView
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			single: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				classesList: [],
				classesIndex: -1,
				
				childrenList: [],
				
				classesShow: false,
				childrenShow: false,
			};
		},
		computed: {
			defaultValue() {
				return [parseInt(this.classesIndex)];
			}
		},
		created() {
			this.getChildren();
		},
		methods: {
			open() {
				this.classesShow = true;
			},
			getChildren() {
				getMyClassChildren().then(res => {
					console.log(res);
					this.classesList = res.data;
					this.showDefault();
				})
			},
			
			itemClick(item, index){
				console.log('itemClick');
				if (this.single) {
					for (let index in this.childrenList) {
						let item = this.childrenList[index];
						item.check = false;
					}
				}
				console.log(item)
				item.check = !item.check;
				console.log(item)
				this.childrenList.splice(index, 1, item);
			},
			
			classesConfirm(res) {
				console.log(res);
				this.classesIndex = parseInt(res[0].index);
				this.childrenList = this.classesList[this.classesIndex].childrenList
				this.childrenShow = true;
				
				uni.setStorage({
				    key: 'classesId',
				    data: this.classesList[this.classesIndex].id,
				});
			},
			
			childrenConfirm() {
				console.log('childrenConfirm');
				console.log(this.classesList);
				this.childrenShow = false;
				let resultList = [];
				for (let index in this.childrenList) {
					let item = this.childrenList[index];
					if (item.check) {
						resultList.push(item);
					}
				}
				this.$emit('confirm', resultList);
			},
			
			childrenCancel() {
				this.childrenShow = false;
			},
			
			showDefault() {
				const classesId = uni.getStorageSync('classesId');
				this.classesIndex = this.classesList.findIndex(item => item.id === classesId);
			},
		}
	}
</script>

<style lang="scss">
	.u-select {
		
		&__header {
			display:flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			padding: 0 40rpx;
		}
	}
	
	.check-view{
		position: absolute;
		top: 20rpx;
		right: 10rpx;
	}
</style>
